﻿@page "/DropDown-List/Forms-Validation"

@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Buttons;
@using System.ComponentModel.DataAnnotations;

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample is used to validate form using the Data Annotation. Choose the value from the dropdown popup. If the value is valid, then the given input will be ready to submit. Otherwise, an error message will be shown until you choose the valid value.</p>
</SampleDescription>
<ActionDescription>
    <p>The form enables the validation with data annotation attributes by clicking on the submit externally. All rules are validated by the DataAnnotationsValidator.</p>
    <p>The above employee field is configured with the following rule.</p>
    <table style='width:100%'>
        <tr>
            <th>Field</th>
            <th>Rule</th>
        </tr>
        <tr>
            <td>Required</td>
            <td>The field must have a valid value.</td>
        </tr>
    </table>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
    @if (string.IsNullOrEmpty(Message))
        {
        <EditForm Model="@model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
            <DataAnnotationsValidator/>
            <div>
                <SfDropDownList Placeholder="Select an Employee" @bind-Value="@model.FirstName" DataSource="@Data">
                    <DropDownListFieldSettings Value="FirstName" Text="FirstName"></DropDownListFieldSettings>
                </SfDropDownList>
                <ValidationMessage For="()=>model.FirstName"></ValidationMessage>
            </div>            
            <div class="sfButton">
                <SfButton type="submit" IsPrimary="true">Submit</SfButton>
            </div>
        </EditForm>
        }
        else
        {
            <div class="alert alert-success">
                @Message
            </div>
        }
    </div>
</div>

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }

    .sfButton {
        padding-top: 20px;
        display: flex;
        justify-content: center;
    }

    .validation-message {
        color: red;
        padding-top: 5px;
    }
</style>

@code {
    private string Message = string.Empty;
    async void OnValidSubmit()
    {
        Message = "Form Submitted Successfully!";
        await Task.Delay(2000);
        Message = string.Empty;
        model.FirstName = null;
        StateHasChanged();
    }
    private void OnInvalidSubmit()
    {
        Message = string.Empty;
    }
    private EmployeeData model = new EmployeeData();
    public class EmployeeData
    {
        [Required(ErrorMessage = "The Employee field is required.")]
        public string FirstName { get; set; }
        public string Designation { get; set; }
        public string Eimg { get; set; }
    }
    private List<EmployeeData> Data = new List<EmployeeData> {
        new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eimg= "7" },
        new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eimg= "1" },
        new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eimg= "3" },
        new EmployeeData() { FirstName = "Laura Callahan", Designation = "Product Manager", Eimg= "2" },
        new EmployeeData() { FirstName = "Margaret Peacock", Designation = "Developer", Eimg= "6" },
        new EmployeeData() { FirstName = "Michael Suyama", Designation = "Team Lead", Eimg= "9" },
        new EmployeeData() { FirstName = "Nancy Davolio", Designation = "Product Manager", Eimg= "4" },
        new EmployeeData() { FirstName = "Robert King", Designation = "Developer", Eimg= "8" },
        new EmployeeData() { FirstName = "Steven Buchanan", Designation = "CEO", Eimg= "10" },
    };
}